---
section: Backgrounds
title: Background Color
slug: /docs/background-color/
---

# Background Color

Utilities for controlling an element's background color.

<carbon-ad />

| React props               | CSS Properties               |
| ------------------------- | ---------------------------- |
| `backgroundColor={color}` | `background-color: {color};` |
| `bg={color}`              | `background-color: {color};` |

## Usage

Control the background color of an element using the `bg={color}` or `backgroundColor={color}` utilities.

```jsx preview color=emerald
<>
  <template preview>
    <x.div textAlign="center">
      <x.button
        type="button"
        py={3}
        px={4}
        transition
        bg="emerald-500"
        color="white"
        fontWeight="semibold"
        borderRadius="lg"
        boxShadow="md"
        outline={{ focus: 'none' }}
        tabindex="-1"
      >
        Click me
      </x.button>
    </x.div>
  </template>
  <x.button bg="emerald-500">Button</x.button>
</>
```

### Changing opacity

Use [color opacity variants](/docs/colors/) to choose another opacity.

```jsx preview color=purple
<>
  <template preview>
    <x.div display="grid" gridTemplateColumns={{ _: 2, sm: 5 }} gap={2}>
      <x.div
        bg="purple-600-a100"
        h={16}
        borderRadius="md"
        fontWeight="extrabold"
        color="white"
        display="flex"
        justifyContent="center"
        alignItems="center"
      >
        100%
      </x.div>
      <x.div
        bg="purple-600-a75"
        h={16}
        borderRadius="md"
        fontWeight="extrabold"
        color="white"
        display="flex"
        justifyContent="center"
        alignItems="center"
      >
        75%
      </x.div>
      <x.div
        bg="purple-600-a50"
        h={16}
        borderRadius="md"
        fontWeight="extrabold"
        color="white"
        display="flex"
        justifyContent="center"
        alignItems="center"
      >
        50%
      </x.div>
      <x.div
        bg="purple-600-a25"
        h={16}
        borderRadius="md"
        fontWeight="extrabold"
        color="white"
        display="flex"
        justifyContent="center"
        alignItems="center"
      >
        25%
      </x.div>
      <x.div
        bg="purple-600-a0"
        h={16}
        borderRadius="md"
        fontWeight="extrabold"
        color="white"
        display="flex"
        justifyContent="center"
        alignItems="center"
      >
        0%
      </x.div>
    </x.div>
  </template>
  <x.div bg="purple-600-a100"></x.div>
  <x.div bg="purple-600-a75"></x.div>
  <x.div bg="purple-600-a50"></x.div>
  <x.div bg="purple-600-a25"></x.div>
  <x.div bg="purple-600-a0"></x.div>
</>
```

## Hover

Control the hover background color of an element using the `bg={{ hover: color }}` or `backgroundColor={{ hover: color}}` utilities.

```jsx preview color=indigo
<>
  <template preview>
    <x.div textAlign="center">
      <x.button
        type="button"
        py={3}
        px={4}
        transition
        bg={{ _: 'indigo-500', hover: 'indigo-800' }}
        color="white"
        fontWeight="semibold"
        borderRadius="lg"
        boxShadow="md"
        outline={{ focus: 'none' }}
        tabindex="-1"
      >
        Click me
      </x.button>
    </x.div>
  </template>
  <x.button bg={{ _: 'indigo-500', hover: 'indigo-800' }}>Button</x.button>
</>
```

## Responsive

To control the background color of an element at a specific breakpoint, use responsive object notation. For example, adding the property `bg={{ md: "red-500" }}` to an element would apply the `bg="red-500"` utility at medium screen sizes and above.

```jsx
<x.button bg={{ md: 'red-500' }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.

## Customizing

import CustomizeColors from '../../../partials/customizing/colors.mdx'

<CustomizeColors />
